<template>
  <el-row :gutter="24">
    <el-col :span="4"> 单词记录 </el-col>

    <el-col :span="20">
      <div class="mod-config">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input
              v-model="dataForm.key"
              placeholder="参数名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()">查询</el-button>
            <el-button
              type="success"  icon="el-icon-plus"
              v-if="isAuth('product:brand:save')"
              @click="addCardHandle()"
              >新增</el-button
            >
          </el-form-item>
        </el-form>

        <el-row>
          <el-col :span="6" v-for="o in 8" :key="o">
            <el-card class="box-card" style="margin-top: 15px">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 2px 2" @click="addRecordHandle()" type="text">新增</el-button>
                <el-button style="float: right; padding: 2px 0" @click="addRecordHandle()" type="text">置顶</el-button>
              </div>
              <div
                v-for="o in 8"
                :key="o"
                class="text item"
                style="margin-top: 2px"
              >
                {{ "good modules : 好的模块,坏模块" }}
              </div>
            </el-card>
          </el-col>

          <el-col :span="12" :offset="2">
            <el-pagination
              @current-change="changes"
              background
              layout="prev, pager, next"
              :total="1000"
              style="margin: 20px"
            >
            </el-pagination>
          </el-col>
        </el-row>

        <el-dialog
          title="新增卡片"
          :visible.sync="addCardVisible"
          width="25%"
          label-width="80px"
        >
          <el-form :model="wordRecord" label-width="80px">
            <el-form-item label="分类" prop="recordType">
                        <recordTypeCascader
              :paths.sync="cardFrom.paths"
            ></recordTypeCascader>
            </el-form-item>


            <el-form-item label="名称" prop="cardName">
              <el-input v-model="cardFrom.cardName" placeholder="名称"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="addCardVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitCardData">确 定</el-button>
          </span>
        </el-dialog>
        
        <el-dialog
          title="新增记录"
          :visible.sync="addWordRecordVisible"
          width="25%"
          label-width="80px"
        >
          <el-form :model="wordRecord" label-width="80px">
            <el-form-item label="单词" prop="attrGroupName">
              <el-input v-model="wordRecord.name" placeholder="单词"></el-input>
            </el-form-item>

            <el-form-item label="释义" prop="attrGroupName">
              <el-input v-model="wordRecord.name" placeholder="释义"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="addWordRecordVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitData">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-col>
  </el-row>
</template>

<script>

import recordTypeCascader from './recordtype-cascader'

export default {
  data() {
    return {
      cardFrom:{
        paths:[],
        cardName:"",
      },
      dataForm: {},
      addWordRecordVisible: false, //新增单词记录
      addCardVisible: false, //新增模块
      wordRecord: {
        name: "",
      },
    };
  },
  components: {
    recordTypeCascader
  },
  methods: {
    //新增卡片名称 
    submitCardData(){
      this.addCardVisible = false;
    },
    submitData() {
      this.addWordRecordVisible = false;
    },
    getDataList() {},
    addRecordHandle() {
      this.addWordRecordVisible = true;
    },
    addCardHandle() {
      this.addCardVisible = true;
    },
    changes() {
      console.log("分页修改");
    },
  },
  //生命周期函数 在实例创建完成后被立即同步调用。
  created() {},
};
</script>

<style>
.box-card {
  width: 300px;
}


</style>